---
type: tutorial
title: Estiliza tu página 'Acerca de'
i18nReady: true
description: |-
  Tutorial: Crea tu primer blog con Astro —
  Añade una etiqueta de estilo de Astro para el estilo de alcance en la página
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ahora que ya tienes una página 'Acerca de' con contenido sobre ti, ¡es hora de darle estilo!

<PreCheck>
  - Estilizar elementos en una sola página.
  - Utilizar variables CSS
</PreCheck>


## Estiliza una página individual

Usando las etiquetas `<style></style>` de Astro, puedes dar estilo a los elementos de tu página. Si añades **atributos** y **directivas** a estas etiquetas, tendrás aún más formas de aplicar estilos.

<Steps>
1. Copia el siguiente código y pégalo en `src/pages/about.astro`:

    ```astro title="src/pages/about.astro" ins={6-11}
    <html lang="es">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head> 

    ```

    Comprueba las tres páginas en la vista previa de tu navegador
    
    - De qué color es el título de la página:

        - ¿Tu página de inicio?  <Spoiler>negro</Spoiler>
        - ¿Tu página 'Acerca de'? <Spoiler>purpura</Spoiler>
        - ¿La página de tu blog? <Spoiler>negro</Spoiler>

    - La página con el mayor texto de título es? <Spoiler>Tu página 'Acerca de'</Spoiler>

    :::tip
    Si no puedes determinar los colores visualmente, puedes utilizar las herramientas de desarrollo de tu navegador para inspeccionar los elementos de título `<h1>` y verificar el color del texto aplicado.
    :::

2. Añade el nombre de clase `skill` a los elementos `<li>` generados en tu página 'Acerca de', para que puedas aplicarles estilo. Tu código debería tener este aspecto:

    ```astro title="src/pages/about.astro" 'class="skill"'
    <p>Mis habilidades son:</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>
    ```

3. Añade el siguiente código a la etiqueta de estilo existente:

    ```astro title="src/pages/about.astro" ins={6-9}
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>
    ```



  4. Vuelve a visitar tu página 'Acerca de' en tu navegador y comprueba, mediante inspección visual o herramientas de desarrollo, que cada elemento de tu lista de habilidades está ahora en verde y en negrita.
</Steps>

## Utiliza tu primera variable CSS
La etiqueta de Astro `<style>` también puede hacer referencia a cualquier variable de tu script frontmatter usando la directiva `define:vars={ {...} }`. Puedes **definir variables dentro de tu código vallado**, y luego **utilizarlas como variables CSS en tu etiqueta de estilo**.

<Steps>
1. Define una variable `skillColor` añadiéndola al script frontmatter de `src/pages/about.astro` así:

    ```astro title="src/pages/about.astro" ins={17}
    ---
    const pageTitle = "Sobre mi";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Escritor técnico",
      hobbies: ["fotografia", "observación de aves", "peñarol"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];

    const happy = true;
    const finished = false;
    const goal = 3;
  
    const skillColor = "crimson";
    ---
    ```

2. Actualiza tu etiqueta `<style>` para definir primero, y luego usar, esta variable `skillColor` dentro de llaves dobles.

    ```astro title="src/pages/about.astro" "define:vars={{skillColor}}" "var(--skillColor)" del={7} ins={8}
    <style define:vars={{skillColor}}> 
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>
    ```

3. Comprueba tu página 'Acerca de' en la vista previa de tu navegador. Deberías ver que las habilidades son ahora de color rojo carmesí, tal y como establece la variable `skillColor` pasada a la directiva `define:vars`.
</Steps>

<Box icon="puzzle-piece">

## Pruébalo tú mismo - Definir variables CSS

<Steps>
 1. Actualiza la etiqueta `<style>` de tu página 'Acerca de' para que coincida con la de abajo. 

    ```astro title="src/pages/about.astro"
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>
    ```
 
 2. Añade las definiciones de variables que falten en tu script frontmatter para que tu nueva etiqueta `<style>` aplique correctamente estos estilos a tu lista de habilidades:
    - El color del texto es rojo carmesí
    - El texto está en negrita
    - Los elementos de la lista están en mayúsculas (todo en mayúsculas)
</Steps>
<details>
<summary>✅ ¡Enséñame el código! ✅</summary>

```astro title="src/pages/about.astro" ins={18-19}
---
const pageTitle = "Sobre mi";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Escritor técnico",
  hobbies: ["fotografia", "observación de aves", "peñarol"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "crimson";
const fontWeight = "bold";
const textCase = "uppercase";
---
```
</details>

</Box>



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Puedo añadir estilos CSS a una página individual utilizando una etiqueta Astro `<style>`.
- [ ] Puedo utilizar variables para dar estilo a los elementos de la página.
</Checklist>
</Box>

### Recursos
- [Comparación entre la sintaxis Astro y JSX](/es/reference/astro-syntax/#diferencias-entre-astro-y-jsx)

- [Etiqueta Astro `<style>`.](/es/guides/styling/#estilando-en-astro)

- [Variables CSS en Astro](/es/guides/styling/#variables-de-css)
